<template>
  <view :class="theme">

    <view class="flex-row items-center"
      style="background-image: linear-gradient(37deg,#081731,#270827); padding: calc(var(--window-top) + var(--status-bar-height) + 60rpx) 30rpx 80rpx; border-radius: 0 0 30rpx 30rpx;">
      <!-- <uv-avatar size="160" :src="include(userInfo.avatar)" /> -->

      <view class="relative">
        <uv-avatar size="160" :src="include(userInfo.avatar)" />
        <label v-if="userInfo.level_name"
          class="absolute bottom-0 text-20 justify-center w-full b-rounded-16 fw-700 lh-36"
          style="text-shadow: 1rpx 0 2rpx #eee; font-style: italic; background-color: rgba(92, 51, 201, 0.6); backdrop-filter: blur(30rpx);">
          {{ userInfo.level_name }}
        </label>
      </view>

      <view @click="uniNavigator({ url: '/pages/client/base/profile' })" class="flex-1 overflow-hidden ml-30 fw-bold">
        <text class="text-36 ellipsis">{{ userInfo.nickname }}</text>
        <view class="mt-24 flex-row items-center">
          <text>ID: {{ userInfo.user_sn }}</text>
          <view v-if="userInfo.shop_icon" @click.stop="uniNavigator({ url: '/pages/client/main/transform' })"
            class="ml-20">
            <uv-image radius="6" width="100" height="40" :src="include(userInfo.shop_icon)" mode="aspectFit)" />
          </view>
          <view v-if="userInfo.partner_icon" class="ml-20">
            <uv-image radius="6" width="100" height="80" :src="include(userInfo.partner_icon)" mode="aspectFit)" />
          </view>
          <view v-if="userInfo.city_icon" class="ml-20">
            <uv-image radius="6" width="100" height="80" :src="include(userInfo.city_icon)" mode="aspectFit)" />
          </view>
        </view>
      </view>
    </view>

    <view class="bg-section flex-row flex-wrap items-center justify-around b-rounded-20 fw-bold text-28"
      style="margin: -50rpx 30rpx 50rpx; padding: 44rpx 0;">
      <view @click="uniNavigator({ url: '/pages/client/main/bill?type=1' })" class="items-center">
        <text class="color-label">龙珠</text>
        <text class="mt-20 color-stress">{{ userInfo.coin || 0 }}</text>
      </view>
      <uv-line direction="col" length="60" color="rgba(255,255,255,0.3)" />
      <view @click="uniNavigator({ url: '/pages/client/main/bill?type=2' })" class="items-center">
        <text class="color-label">碎片</text>
        <text class="mt-20 color-stress">{{ userInfo.coin_money || 0 }}</text>
      </view>
      <uv-line direction="col" length="60" color="rgba(255,255,255,0.3)" />
      <view @click="uniNavigator({ url: '/pages/client/main/bill?type=3' })" class="items-center">
        <text class="color-label">仓库</text>
        <text class="mt-20 color-stress">{{ userInfo.money || 0 }}</text>
      </view>
    </view>

    <view class="h-150 flex-row flex-wrap mr-30">
      <view v-for="(item, index) in sections[0]" :key="index" @click="clickItemEvent(index, 0)"
        class="flex-1 ml-30 b-rounded-20 overflow-hidden relative">
        <uv-image width="100%" height="100%" :src="include(item.bg)" />
        <view class="absolute top-40 left-30">
          <text class="color-inverse text-28 fw-bold">{{ item.title }}</text>
          <text class="mt-12 text-20 color-[#5f597a]">{{ item.subtitle }}</text>
        </view>
      </view>
    </view>

    <view @click="uniNavigator({ url: '/pages/client/base/share' })" style="margin: 30rpx 30rpx 0;">
      <uv-image width="100%" height="150" src="/static/img/4/0.png" mode="aspectFit" />
    </view>

    <view class="bg-section flex-row flex-wrap b-rounded-20" style="margin: 50rpx 30rpx 30rpx;">
      <view v-for="(item, index) in sections[1]" :key="index" @click="clickItemEvent(index, 1)"
        class="items-center w-[25%] pt-30 pb-30">
        <uv-icon size="74" :name="item.icon" mode="aspectFit" />
        <text class="mt-20 fw-bold">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { transformURL, uniNavigator, uniShowToast } from "@/common/libs/utils";
import { onPullDownRefresh, onShow } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const userInfo = reactive<AnyObject>({});
const { $config = {} } = getApp().globalData || {};

const sections: AnyObject[][] = [
  [
    {
      title: "我的好友",
      subtitle: "点击进入查看",
      bg: "/static/img/4/1.png",
      url: "/pages/client/base/team"
    },
    {
      title: "分红中心",
      subtitle: "点击进入查看",
      bg: "/static/img/4/2.png",
      url: "/pages/client/main/pond"
    },
  ],
  [
    {
      name: "店长中心",
      icon: "/static/img/4/8.png",
      url: "/pages/client/main/server"
    },
    {
      name: "我的仓库",
      icon: "/static/img/4/3.png",
      url: "/pages/client/main/transfer"
    },
    {
      name: "转赠",
      icon: "/static/img/4/4.png",
      url: "/pages/client/main/transform-1"
    },
    {
      name: "实名认证",
      icon: "/static/img/4/10.png",
      url: "/pages/client/main/realName"
    },
    {
      name: "收货地址",
      icon: "/static/img/4/6.png",
      url: "/pages/client/base/address"
    },
    {
      name: "我的订单",
      icon: "/static/img/4/7.png",
      url: "/pages/client/mall/orders"
    },
    // {
    //   name: "关于我们",
    //   icon: "/static/img/4/9.png",
    //   // url: "/pages/client/base/service"
    // },
    {
      name: "帮助中心",
      icon: "/static/img/4/14.png",
      url: "help"
    },
    {
      name: "设置",
      icon: "/static/img/4/15.png",
      url: "/pages/client/base/setting"
    },
  ],
];

onPullDownRefresh(() => {
  getUserInfo();
  setTimeout(uni.stopPullDownRefresh, 360);
});

onShow(() => {
  getUserInfo();
});

const getUserInfo = () => {
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      Object.assign(userInfo, data, data.userData);
      uni.hideToast();
    },
  });
}

const clickItemEvent = (itemIndex: number, sectionIndex: number) => {
  const { url } = sections[sectionIndex][itemIndex] || {};
  switch (url) {
    case undefined:
    case "":
      uniShowToast({ title: "暂未开放", icon: "none" });
      break;
    case "help":
      const title = "龙之大陆玩法攻略"
      uni.setStorageSync("richText", `<img src="../img/strategy.jpg" width="100%" style="border-radius: 8px;" alt="load error." />`);
      uni.navigateTo({
        url: transformURL("/pages/common/webview",
          {
            title: encodeURIComponent(title),
            url: encodeURIComponent(transformURL("/html/document.html", { title }))
          }
        )
      });
      break;
    default:
      uniNavigator({ url })
      break;
  }
}

</script>

<style lang="scss" scoped>
// scss
</style>